<template>
  <view
    :class="[
      'custom-nam-bar',
      props.radio && 'radio',
      props.dark && 'dark',
      props.shadow && 'shadow',
    ]"
    :style="{ backgroundColor: props.dark ? props.bc : '#fff' }"
  >
    <view class="opts">
      <!-- Left Slot -->
      <view class="left" @click="goBack">
        <slot name="left">
          <!-- 默认返回按钮 -->
          <image src="/static/images/icon/back.png" mode="scaleToFill" />
        </slot>
      </view>

      <!-- Center Title -->
      <view class="center">{{ title }}</view>

      <!-- Right Slot -->
      <view class="right">
        <slot name="right"></slot>
      </view>
    </view>
    <slot name="tabs"></slot>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  goBack: {
    type: Function,
    default: () => {},
  },
  fixed: {
    type: Boolean,
    default: true,
  },
  bc: {
    type: String,
    default: "#007AFF",
  },
  dark: {
    type: Boolean,
    default: true,
  },
  radio: {
    type: Boolean,
    default: true,
  },
  shadow: {
    type: Boolean,
    default: true,
  },
});

const goBack = () => {
  if (props.goBack) {
    props.goBack();
    uni.navigateBack({
      delta: 1,
    });
  }
};
</script>

<style lang="scss" scoped>
.custom-nam-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 15rpx;
  background-color: #fff;
  color: #000;
  min-height: 100rpx;
  font-size: 28rpx;
  .opts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
  }
  .left {
    display: flex;
    align-items: center;
    height: 100%;
    image {
      width: 25rpx;
      height: 25rpx;
    }
  }

  .center {
    flex: 1;
    text-align: center;
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }

  &.radio {
    border-radius: 0 0 20rpx 20rpx;
  }

  &.dark {
    color: #fff;
    .left {
      image {
        filter: brightness(0) invert(1);
      }
    }
  }

  &.shadow {
    box-shadow: 0 0 15rpx #ccc;
  }
}
</style>
